<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .a{
            color: red;
        }
        .b{
            color: yellow;
        }
        .c{
            color: pink;
        }
        .d{
            color: blueviolet;
        }
    </style>
    <script src="../框架相关的js/vue.js"></script>
</head>
<body>
    <!-- 
        a:1  是否有桌子  1有 绿色  0 没有 红色
        b :1  是否可以用  1可以  0 不可以用 黄色
        c:1    是否有人用   1 有人是 粉色  0 没人用 紫色
     -->
    <div id="app">
         {{a}}
         <div v-for="item in arr">
            <div  :class="item.cla">
                {{item.a}}
            </div>
         </div>
    </div>



    <script>
   const  vm=new Vue({
       el:'#app',
       data:{
           a:90,
           arr:[{  a:1,b:1,c:1 ,cla:null },{  a:0,b:1,c:1 ,cla:null },{  a:1,b:0,c:1 ,cla:null }]
             
               
         
       },
       methods: {
           
       },
       mounted() {
           this.arr.forEach(item=>{
               console.log(item,'?????');
               if(!item.a){
                   item.cla='a'
               }else if(!item.b){
                item.cla='b'
               }else if(!item.c){
                item.cla='d'
               }else{
                   item.cla='c'
               }
           })
           


           console.log(this.arr,'???');
       },
   })

    </script>
</body>
</html>